<template>
	<view class="page-view flex flex-direction">
		<view class="account-list flex-sub">
			<view class="account-item u-flex-y-center" v-for="(item, index) in accountList" :key="index" @click="changeAccount(item)">
				<u-avatar :size="100"></u-avatar>
				<view class="u-m-l-22 u-flex-sub">
					<view class="flex align-center">
						<view class="name">{{ item.nickName || '--' }}</view>
						<u-tag :text="item.patriRelationName||'其他'" plain size="mini" type="primary" shape="circle"></u-tag>
					</view>
					<view class="account flex align-center">
						<image src="/static/female.png" v-if="item.gender == '女'"></image>
						<image src="/static/male.png" v-else></image>
						<text>{{ getAgeByBirthday(item.birth) }}</text>
					</view>
				</view>
				<view class="tips" v-if="item.detailId == curAccount.detailId">当前登录</view>
			</view>
		</view>
		<view class="addBtn" @click="addAccount">添加用户</view>
	</view>
</template>

<script>
function getAgeByBirthday(strDay) {
	strDay = strDay.slice(0, 10);
	var arrDay = strDay.split('-');
	var birthYear = +arrDay[0];
	var birthMonth = +arrDay[1];
	var birthDay = +arrDay[2];

	var now = new Date();
	var nowYear = now.getFullYear();
	var nowMonth = now.getMonth() + 1;
	var nowDay = now.getDate();

	var age = nowYear - birthYear;
	if (age === 0) {
		return 0;
	}
	if (age < 0) {
		return -1;
	}

	var monthDiff = nowMonth - birthMonth;
	if (monthDiff === 0) {
		var dayDiff = nowDay - birthDay;
		if (dayDiff < 0) {
			return age - 1;
		}
		return age;
	} else if (monthDiff < 0) {
		return age - 1;
	}
	return age;
}
import { mapState, mapActions, mapMutations } from 'vuex';
import { getAccountUserList } from '@/service/api.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState(['accountList', 'userInfo', 'curAccount'])
	},
	onShow() {
		this.getAccountList();
	},
	methods: {
		...mapMutations(['$uStore']),
		changeAccount(info) {
			this.$uStore({
				name: 'curAccount',
				value: info
			});
			uni.navigateBack();
		},
		addAccount() {
			uni.navigateTo({
				url: '/pages/login/regInfo'
			});
		},
		async getAccountList() {
			let accountList = await getAccountUserList(this.userInfo.userId);
			this.$uStore({
				name: 'accountList',
				value: accountList || []
			});
			let info = '';
			if (accountList && accountList.length > 0) {
				if (this.curAccount && this.curAccount.detailId) {
					info = accountList.find(item => item.detailId == this.curAccount.detailId);
				}
				if (!info) {
					info = accountList[0];
				}
			}
			this.$uStore({
				name: 'curAccount',
				value: info
			});
		},
		getAgeByBirthday(strDay) {
			let age = getAgeByBirthday(strDay);
			return age + '岁';
		}
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	width: 100%;
	background: #f7f7fc;
	box-sizing: border-box;
	padding-bottom: calc(30upx + env(safe-area-inset-bottom) / 2);
}
.account-list {
	min-height: 0;
	overflow: auto;
	.account-item {
		color: #1c2023;
		font-size: 24upx;
		z-index: 999;
		margin: 30upx 30upx 0;
		padding: 30rpx;
		position: relative;
		background: #fff;
		border-radius: 16upx;
		.name {
			font-size: 32upx;
			margin-right: 10upx;
			font-weight: 600;
		}
		.account {
			font-size: 30upx;
			margin-top: 10upx;
			color: #36374d;
			image {
				width: 30upx;
				height: 30upx;
				margin-right: 10upx;
			}
		}
		.tips {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 10upx 20upx 10upx 20upx;
			font-size: 30upx;
			background: $u-primary;
			border-radius: 30upx 0 20upx 0;
			color: #fff;
		}
		& + .stu-item {
			margin-top: 20upx;
		}
	}
}
.addBtn {
	border: 2upx solid $u-primary;
	line-height: 80upx;
	height: 80upx;
	text-align: center;
	color: $u-primary;
	font-size: 34upx;
	border-radius: 20upx;
	background: #fff;
	margin: 30upx 30upx 0;
}
</style>
